import { Component, ViewEncapsulation } from '@angular/core';
import {ITooltipAngularComp} from '@ag-grid-community/angular';

@Component({
  selector: 'tooltip-component',
  template: `
    <div class="custom-tooltip">
      <p>{{ valueToDisplay }}</p>
    </div>
  `,
  styles: [
      `
      :host {
        position: absolute;
        width: 200px;
        height: 70px;
        border: 1px solid cornflowerblue;
        pointer-events: none;
        transition: opacity 1s;
      }

      :host.ag-tooltip-hiding {
        opacity: 0;
      }

      .custom-tooltip p {
        margin: 5px;
      }

      .custom-tooltip p:first-of-type {
        font-weight: bold;
      }
    `,
  ],
})
export class CustomTooltip implements ITooltipAngularComp {
   params: any;
   valueToDisplay: string;

  agInit(params): void {
    this.params = params;
    this.valueToDisplay = this.params.value
      ? this.params.value
      : '- Missing -';
  }
}
